<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no    ">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./css/classify.css">
    <title>classify</title>
</head>

<body>
    <!-- header -->
    <header class="clearfix">
        <!-- <div class="logo fl"><img src="./img/logo.png" alt=""></div> -->
        <div class="back_button fl">
            <p>Back</p>
        </div>

        <div class="cityBar fr">
            <select name="" id="">
                <option value="">广州市</option>
                <option value="">深圳市</option>
            </select>
        </div>

        <div class="nameBar">
            <p>分类</p>
        </div>

    </header>

    <!-- #main -->
    <div id="main">
        <!-- nav part -->
        <div class="nav">
            <div class="nav_detail_area">
                <div class="n_d_img"><img src="./img/category/foods.png" alt="" class="img_processing"></div>
                <div class="n_d_text">
                    <p>美食</p>
                </div>
            </div>
            <div class="nav_detail_area">
                <div class="n_d_img"><img src="./img/category/movie.png" alt="" class="img_processing"></div>
                <div class="n_d_text">
                    <p>电影</p>
                </div>
            </div>
            <div class="nav_detail_area">
                <div class="n_d_img"><img src="./img/category/sport.png" alt="" class="img_processing"></div>
                <div class="n_d_text">
                    <p>运动</p>
                </div>
            </div>
            <div class="nav_detail_area">
                <div class="n_d_img"><img src="./img/category/music.png" alt="" class="img_processing"></div>
                <div class="n_d_text">
                    <p>唱歌</p>
                </div>
            </div>

            <div class="nav_circle_area">
                <div class="nav_circle"></div>
                <div class="nav_circle"></div>
                <div class="nav_circle"></div>
                <div class="nav_circle"></div>
            </div>
        </div>

        <!-- classify -->
        <div class="classify">
            <!-- foods -->
            <div class="classify_area">
                <div class="classify_title clearfix">
                    <div class="title_area fl clearfix">
                        <div class="icon_food fl"><img src="./img/category/type_of_food.png" alt="" class="img_processing"></div>
                        <p>美食类</p>
                    </div>
                    <div class="for_more fr clearfix">
                        <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                        <p class="fr">更多</p>
                    </div>
                </div>
                <div class="classify_content">
                    <div class="content_img"><img src="./img/category/foods1.jpg" alt="" class="img_processing"></div>
                    <div class="content_img"><img src="./img/category/foods2.jpg" alt="" class="img_processing"></div>
                    <div class="content_img"><img src="./img/category/foods3.jpg" alt="" class="img_processing"></div>
                    <div class="content_img"><img src="./img/category/foods4.jpg" alt="" class="img_processing"></div>
                </div>
            </div>
            <!-- sports -->
            <div class="classify_area">
                <div class="classify_title clearfix">
                    <div class="title_area fl clearfix">
                        <div class="icon_sport fl"><img src="./img/category/type_of_sport.png" alt="" class="img_processing"></div>
                        <p>运动类</p>
                    </div>
                    <div class="for_more fr clearfix">
                        <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                        <p class="fr">更多</p>
                    </div>
                </div>
                <div class="classify_content">
                    <div class="content_img"><img src="./img/category/sport1.jpg" alt="" class="img_processing"></div>
                    <div class="content_img"><img src="./img/category/sport2.jpg" alt="" class="img_processing"></div>
                    <div class="content_img"><img src="./img/category/sport3.jpg" alt="" class="img_processing"></div>
                    <div class="content_img"><img src="./img/category/sport4.jpg" alt="" class="img_processing"></div>
                </div>
            </div>
            <!-- movie -->
            <div class="classify_area">
                <div class="classify_title clearfix">
                    <div class="title_area fl clearfix">
                        <div class="icon_movie fl"><img src="./img/category/type_of_movie.png" alt="" class="img_processing"></div>
                        <p>电影类</p>
                    </div>
                    <div class="for_more fr clearfix">
                        <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                        <p class="fr">更多</p>
                    </div>
                </div>
                <div class="classify_content">
                    <div class="content_img"><img src="./img/category/movie1.jpg" alt="" class="img_processing"></div>
                    <div class="content_img"><img src="./img/category/movie2.jpg" alt="" class="img_processing"></div>
                    <div class="content_img"><img src="" alt="" class="img_processing"></div>
                    <div class="content_img"><img src="" alt="" class="img_processing"></div>
                </div>
            </div>
        </div>

    </div>
    <!-- footer -->
    <footer>
        <div class="menu">
            <div class="menu_area">
                <a href="./index.html">
                    <div class="menu_img"><img src="./img/home.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>首页</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./classify.html">
                    <div class="menu_img"><img src="./img/category/class.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>分类</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./discover.html">
                    <div class="menu_img"><img src="./img/discover.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>发现</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./profile.html">
                    <div class="menu_img"><img src="./img/person.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>我的</p>
                    </div>
                </a>
            </div>
        </div>
    </footer>

    <script>


        document.body.style.height = window.innerHeight + "px";

        /*动态改变根元素字体大小*/
        function recalc() {
            // 获取客户端宽度
            var clientWidth = document.documentElement.clientWidth;
            if (!clientWidth) return;
            // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
            document.documentElement.style.fontSize = 100 * (clientWidth / 750) + 'px';

        }

        function initRecalc() {
            recalc();
            // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
            var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
            if (!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
        }
        initRecalc();



    </script>
</body>

</html>